<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Sortable Table API (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="local/webfxlayout.js"></script>
<script type="text/javascript" src="local/webfxapi.js"></script>

</head>
<body>
<!-- WebFX Layout Include -->
<script type="text/javascript">

var articleMenu= new WebFXMenu;
articleMenu.left  = 384;
articleMenu.top   = 86;
articleMenu.width = 140;
articleMenu.add(new WebFXMenuItem("Sortable Table", "sortabletable.html"));
articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
articleMenu.add(new WebFXMenuItem("API", "api.html"));
articleMenu.add(new WebFXMenuItem("Demos", "demos.html"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/sortabletable112.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));

webfxLayout.writeTitle("Sortable Table API");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();

</script>
<div class="webfx-main-body">
<!-- end WebFX Layout Includes -->

<!-- Start main output --><h2 id="SortableTable">SortableTable</h2><p>
		This class is used to make a HTML Table sortable.
	</p><h3>Syntax</h3><p><code>

	new SortableTable([<span class="methodArgument">oTable</span>&nbsp;[, <span class="methodArgument">oSortTypes</span>]])</code></p><h3>Parameters</h3><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oTable</code></td><td><code>HTMLTableElement</code></td><td><span class="optional">Optional.</span> The table element that should be sortable</td></tr><tr><td><code>oSortTypes</code></td><td><code>String[]</code></td><td><span class="optional">Optional.</span> An array containing strings describing the sort types</td></tr></tbody></table><h3>Static Methods</h3><table><thead><tr><td>Name</td><td>Description</td></tr></thead><tbody>
		<tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getInnerText</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getInnerText(<span class="methodArgument">oNode</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oNode</code></td><td><code>Node</code></td><td>The node to get the text for</td></tr></tbody></table><h4>Return Type</h4><p><code>String</code></p></div></div></td><td>Returns the text inside the node and its subtree</td></tr>
		<tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">basicCompare</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.basicCompare(<span class="methodArgument">n1</span>, <span class="methodArgument">n2</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>n1</code></td><td><code>Object</code></td><td>The first value to compare</td></tr><tr><td><code>n2</code></td><td><code>Object</code></td><td>The second value to compare</td></tr></tbody></table><h4>Return Type</h4><p><code>Number</code></p></div></div></td><td>Takes two values and compares them using &lt; and returns
				-1 if the first one is smaller, +1 if the second one is smaller or
				0 if they are equal.</td></tr>
		<tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">idFunction</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.idFunction(<span class="methodArgument">x</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>x</code></td><td><code>Object</code></td><td>The value to return</td></tr></tbody></table><h4>Return Type</h4><p><code>Object</code></p></div></div></td><td>This just returns the first argument</td></tr>
		<tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">toUpperCase</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.toUpperCase(<span class="methodArgument">s</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>s</code></td><td><code>String</code></td><td>The string to return in upper case</td></tr></tbody></table><h4>Return Type</h4><p><code>String</code></p></div></div></td><td>Takes a string and returns it in upper case</td></tr>
		<tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">toDate</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.toDate(<span class="methodArgument">s</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>s</code></td><td><code>String</code></td><td>The ISO date string</td></tr></tbody></table><h4>Return Type</h4><p><code>Date</code></p></div></div></td><td>Takes an ISO date formatted string and returns a JS date object</td></tr>
	</tbody></table><h3>Static Fields</h3><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>gecko</code></td><td><code>Boolean</code></td><td>True if the user agent is based on Gecko, the Mozilla rendering engine</td></tr><tr><td><code>msie</code></td><td><code>Boolean</code></td><td>True if the user agent is based on Microsoft Internet Explorer</td></tr><tr><td><code>removeBeforeSort</code></td><td><code>Boolean</code></td><td>If true then the table is removed while sorting. Some browser are faster when doing it this way.</td></tr></tbody></table><h3>Methods</h3><table><thead><tr><td>Name</td><td>Description</td></tr></thead><tbody><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">addSortType</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.addSortType(<span class="methodArgument">sType</span>&nbsp;[, <span class="methodArgument">fGetValueFromString</span>&nbsp;[, <span class="methodArgument">fCompareFunction</span>&nbsp;[, <span class="methodArgument">fGetRowValue</span>]]])</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>sType</code></td><td><code>String</code></td><td>The type of the data</td></tr><tr><td><code>fGetValueFromString</code></td><td><code>Function</code></td><td><span class="optional">Optional.</span> A function that takes a string and casts it to a desired
						format. If left out the string is just returned as it is</td></tr><tr><td><code>fCompareFunction</code></td><td><code>Function</code></td><td><span class="optional">Optional.</span> A normal JS sort compare function. Takes two values and
						compares them. If left out less than, &lt;, compare is used</td></tr><tr><td><code>fGetRowValue</code></td><td><code>Function</code></td><td><span class="optional">Optional.</span> A function that takes the row and the column index and
						returns the value used to compare. If left out then the innerText
						is first taken for the cell and then the fGetValueFromString is
						used to convert that string the desired value and type</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Adds a sort type to all instance of SortableTable</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">asyncSort</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.asyncSort(<span class="methodArgument">nColumn</span>&nbsp;[, <span class="methodArgument">bDescending</span>&nbsp;[, <span class="methodArgument">sSortType</span>]])</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The column to sort after</td></tr><tr><td><code>bDescending</code></td><td><code>Boolean</code></td><td><span class="optional">Optional.</span> Whether to sort the column descending or ascending</td></tr><tr><td><code>sSortType</code></td><td><code>String</code></td><td><span class="optional">Optional.</span> The type to sort the column after. If left out the sort type used in the constructor is used</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sorts the table asynchronously after the nColumns column. This method allows the current JS
				thread to finish before the actual sorting begins. This allows the UI to be updated before the sort.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">destroy</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.destroy()</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td></td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Destroys the object. This breaks all references between the DOM and the JavaScript object</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">destroyCache</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.destroyCache(<span class="methodArgument">oArray</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oArray</code></td><td><code>Array</code></td><td>The data cache array to destroy</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Destroys the cache data. This breaks all references between the array and the DOM</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getCache</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getCache(<span class="methodArgument">sType</span>, <span class="methodArgument">nColumn</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>sType</code></td><td><code>String</code></td><td>The type to use when sorting the column</td></tr><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The column to sort the table after</td></tr></tbody></table><h4>Return Type</h4><p><code>Array</code></p></div></div></td><td>Returns an array containing the data to sort the table after</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getRowValue</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getRowValue(<span class="methodArgument">oRow</span>, <span class="methodArgument">sType</span>, <span class="methodArgument">nColumn</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oRow</code></td><td><code>HTMLTableRowElement</code></td><td>The table row element which value this method should return</td></tr><tr><td><code>sType</code></td><td><code>String</code></td><td>The type to use for the nColumn column</td></tr><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The column we want the value for</td></tr></tbody></table><h4>Return Type</h4><p><code>Object</code></p></div></div></td><td>Returns the value for this row when sorting the table using the sType type and the nColumn column</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getSortFunction</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getSortFunction(<span class="methodArgument">sType</span>, <span class="methodArgument">nColumn</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>sType</code></td><td><code>String</code></td><td>The type of the data</td></tr><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The column to sort after</td></tr></tbody></table><h4>Return Type</h4><p><code>Function</code></p></div></div></td><td>Returns the function used to compare two items in the data cache array</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getSortType</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getSortType(<span class="methodArgument">nColumn</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The index of the column to sort</td></tr></tbody></table><h4>Return Type</h4><p><code>String</code></p></div></div></td><td>Returns a string representing the type to sort the column after</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getValueFromString</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.getValueFromString(<span class="methodArgument">sText</span>, <span class="methodArgument">sType</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>sText</code></td><td><code>String</code></td><td>The text to cast to the desired data type</td></tr><tr><td><code>sType</code></td><td><code>String</code></td><td>The type that the text should be cast to</td></tr></tbody></table><h4>Return Type</h4><p><code>Object</code></p></div></div></td><td>Casts a string to the data type used for the comparison in the sort method</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">headerOnclick</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.headerOnclick(<span class="methodArgument">e</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>e</code></td><td><code>MouseEvent</code></td><td>The mouse event object describing the click event</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Called when the user clicks on a table header cell</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">initHeader</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.initHeader(<span class="methodArgument">oSortTypes</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oSortTypes</code></td><td><code>String[]</code></td><td>An array containing strings describing the sort types</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Initiates the header cells with event listeners and arrow images</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">removeSortType</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.removeSortType(<span class="methodArgument">sType</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>sType</code></td><td><code>String</code></td><td>The type of the data</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Removes a sort type from all instance of SortableTable. Be careful
				not to remove a type that is needed by some instances of SortableTable.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setSortTypes</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.setSortTypes(<span class="methodArgument">oSortTypes</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oSortTypes</code></td><td><code>String[]</code></td><td>An array containing the sort types</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sets the types to use to sort the different columns by.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setTable</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.setTable(<span class="methodArgument">oTable</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oTable</code></td><td><code>HTMLTableElement</code></td><td>A table element that should become sortable</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sets the table element to use for the sortable table. This
				in turn calls setTHEad and setTBody using the table head of the table
				and the first table body of the table.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setTBody</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.setTBody(<span class="methodArgument">oTable</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oTable</code></td><td><code>HTMLTBodyElement</code></td><td>A table body element that should become sortable</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sets the table body element to use for the sortable table.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setTHead</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.setTHead(<span class="methodArgument">oTable</span>)</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>oTable</code></td><td><code>HTMLTHeadElement</code></td><td>A table head element that should become sortable</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sets the table head element to use for the sortable table.
				This adds click event handlers to the cells for the table header.
				It also adds sort arrows as needed to these cells.</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">sort</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.sort(<span class="methodArgument">nColumn</span>&nbsp;[, <span class="methodArgument">bDescending</span>&nbsp;[, <span class="methodArgument">sSortType</span>]])</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>nColumn</code></td><td><code>Number</code></td><td>The column to sort after</td></tr><tr><td><code>bDescending</code></td><td><code>Boolean</code></td><td><span class="optional">Optional.</span> Whether to sort the column descending or ascending</td></tr><tr><td><code>sSortType</code></td><td><code>String</code></td><td><span class="optional">Optional.</span> The type to sort the column after. If left out the sort type used in the constructor is used</td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Sorts the table after the nColumns column</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">uninitHeader</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.uninitHeader()</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td></td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Used to clean up the header when the object is destroyed</td></tr><tr><td><a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">updateHeaderArrows</a><div class="methodContainer"><div class="methodInfo"><h4>Syntax</h4><p><code><span class="object">object</span>.updateHeaderArrows()</code></p><h4>Arguments</h4><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td></td></tr></tbody></table><h4>Return Type</h4><p><code>void</code></p></div></div></td><td>Updates the class names for the header arrow images to reflect the current sort state</td></tr></tbody></table><h3>Fields</h3><table><thead><tr><td>Name</td><td>Type</td><td>Descripton</td></tr></thead><tbody><tr><td><code>descending</code></td><td><code>Boolean</code></td><td><span class="readOnly">Read only.</span> Whether the currently sorted column is sorted descending. Null if no column is sorted.</td></tr><tr><td><code>document</code></td><td><code>Document</code></td><td><span class="readOnly">Read only.</span> The document where the table resides</td></tr><tr><td><code>element</code></td><td><code>HTMLTableElement</code></td><td><span class="readOnly">Read only.</span> The HTML table used with this object</td></tr><tr><td><code>sortColumn</code></td><td><code>Number</code></td><td><span class="readOnly">Read only.</span> The currently sorted column. Null if none.</td></tr><tr><td><code>tBody</code></td><td><code>HTMLTableBodyElement</code></td><td><span class="readOnly">Read only.</span> The table body of the table</td></tr><tr><td><code>tHead</code></td><td><code>HTMLTableHeadElement</code></td><td><span class="readOnly">Read only.</span> The table head of the table</td></tr></tbody></table><h3>Events</h3><table><thead><tr><td>Name</td><td>Descripton</td></tr></thead><tbody><tr><td><code>onbeforesort</code></td><td>Called before the table is sorted</td></tr><tr><td><code>onsort</code></td><td>Called after the table is sorted</td></tr></tbody></table><h3>Remarks</h3><p>
			None.
		</p><!-- end main output -->
<p>
<a href="sortabletable.html">Sortable Table</a><br />
<a href="implementation.html">Implementation</a><br />
<a href="api.html">API</a><br />
<a href="demos.html">Demos</a><br />
<a href="http://webfx.eae.net/download/sortabletable112.zip">Download</a>
</p>

<p class="author">Author: Erik Arvidsson</p>

<!-- end webfx-main-body -->
</div>

</body>
</html>
